<template>
  <div class="container">
    <el-form
             ref="loginRef" :model="loginForm" :rules="loginRules"
             status-icon
             autocomplete="on"
             label-width="0px">
      <img
           class="logo"
           src="../assets/images/logo.jpg"
           alt="logo">
      <div class="inputsWrapper">
        <div class="systemName">核销后台管理系统</div>
        <el-form-item prop="username">
          <el-input
                    v-model="loginForm.username"
                    type="text"
                    auto-complete="off"
                    placeholder="账号">
            <template #prefix><svg-icon icon-class="user" /></template>
          </el-input>
          <!-- <el-input
                    type="text"
                    name="username"
                    v-model="loginForm.username"
                    v-filter-special-char="loginForm.username"
                    autocomplete="on"
                    placeholder="请输入账号"
                    :prefix-icon="User"
                    tabindex="1"
                    clearable /> -->
        </el-form-item>
        <el-form-item prop="password">
          <el-input
                    v-model="loginForm.password"
                    type="password"
                    auto-complete="off"
                    placeholder="密码"
                    @keyup.enter="handleLogin">
            <template #prefix><svg-icon icon-class="password" /></template>
          </el-input>
          <!-- <el-input
                    v-model="loginForm.password"
                    type="password"
                    name="password"
                    autocomplete="on"
                    placeholder="请输入密码"
                    show-password
                    :prefix-icon="Lock"
                    clearable
                    tabindex="2"
                    @keyup.enter="handleLogin">
            <template #prefix><svg-icon icon-class="password" /></template>
          </el-input> -->
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button
                     :loading="loading"
                     size="large"
                     type="primary"
                     style="width:100%;"
                     @click.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </div>
    </el-form>
    <div
         class="copyright">
      copyright © 2019 恒大集团（中国）产业有限公司
    </div>
  </div>
</template>

<script setup>
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false,

});

const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
};

const loading = ref(false);


// watch(route, (newRoute) => {
//   redirect.value = newRoute.query && newRoute.query.redirect;
// }, { immediate: true });

function handleLogin() {
  proxy.$refs.loginRef.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
      // 调用action的登录方法
      // const res = {
      //   data: hook,
      // };

      userStore.login(loginForm.value).then(() => {
        // const query = route.query;
        // const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
        //   if (cur !== "redirect") {
        //     acc[cur] = query[cur];
        //   }
        //   return acc;
        // }, {});
        // router.push({ path: redirect.value || "/", query: otherQueryParams });
        router.push('/')
      }).catch(() => {
        loading.value = false;
      });
      // console.log('跳转');
      // router.push('/index')
    }
  });
}


function getCookie() {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get("rememberMe");
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  };
}

getCookie();
</script>

<style lang="scss" scoped>
$form_width: 840px;
$form_height: 530px;
$input_wrapper_width: 340px;
$input_height: 40px;
$large_input_height: $input_height * 1.5;

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url('../assets/images/bg-2x.png') center / auto;
  min-width: 840px;
  min-height: 600px;
  position: relative;

  @media (min-width: 1921px) {
    background-image: url('../assets/images/bg-3x.png');

    .el-form {
      width: $form_width * 1.5;
      height: $form_height * 1.5;
    }

    .inputsWrapper {
      width: $input_wrapper_width * 1.5;

      .el-input__inner {
        height: $large_input_height;
        line-height: $large_input_height;
      }

      .el-input__prefix {
        line-height: $large_input_height;
      }
    }

    .code img {
      width: 150px;
      height: $large_input_height;
    }

    .login {
      height: $large_input_height;
      margin: 24 * 1.5px 0 0 !important;
    }

    .el-form-item {
      margin-bottom: 24 * 1.5px;
    }

    .systemName {
      margin-top: 95 * 1.5px;
      padding-bottom: 38 * 1.5px;
    }
  }

  .login {
    width: 100%;
    margin: 24px 0 0 !important;
    height: $input_height;
  }

  .el-form-item {
    margin-bottom: 24px;

    .el-form-item__content {
      height: 40px;
    }
  }
}

.el-form {
  width: $form_width;
  height: $form_height;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.logo {
  width: 132px;
  position: absolute;
  left: 48px;
  top: 32px;
}

.inputsWrapper {
  position: absolute;
  right: 48px;
  width: $input_wrapper_width;

  .el-input__inner {
    height: $input_height;
    line-height: $input_height;
    padding-left: 36px;
  }
}

.systemName {
  font-size: 28px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  margin-top: 95px;
  padding-bottom: 38px;
  font-weight: bold;
}

.copyright {
  position: absolute;
  left: 0;
  bottom: 44px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 20px;
}
</style>
